<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form{
            line-height: 35px;
        }
        .error{
            font-size: 12px;
            color: red;
        }
        .success{
            color: green;
        }
    </style>
    <script>
        function checkUsername() {
            // 用户名只能由数字、字母、下划线、横线组成，且只能以数字或字母开头，长度为6-10位
            var username = $('username').value
            var reg = /^[\da-z][\w-]{4,8}[\da-z]$/
            if(reg.test(username)){
                $('usernameInfo').innerHTML = 'ok'
                $('usernameInfo').className = 'success'
                return true
            }else{
                $('usernameInfo').innerHTML = '用户名只能由数字、字母、下划线、横线组成，且只能以数字或字母开头，长度为6-10位'
                $('usernameInfo').className = 'error'
                return false
            }
        }

        function checkPassword() {
            // 密码只能由数字、字母、下划线组成，长度为3-9位
            var password = $('password').value
            var reg = /^\w{3,9}$/
            if(!reg.test(password)){
                $('passwordInfo').innerHTML = '密码只能由数字、字母、下划线组成，长度为3-9位'
                $('passwordInfo').className = 'error'
                return false
            }
            $('passwordInfo').innerHTML = 'ok'
            $('passwordInfo').className = 'success'
            return true
        }
        
        function checkRepassword() {
            // 两次输入的密码必须相同
            var password = $('password').value
            var repassword = $('repassword').value
            if(password!=repassword){
                $('repasswordInfo').innerHTML = '两次输入的密码不一致'
                $('repasswordInfo').className = 'error'
                return false
            }
            $('repasswordInfo').innerHTML = 'ok'
            $('repasswordInfo').className = 'success'
            return true
        }
        
        function checkEmail() {
            //  *@*.**  a@q.com.cn
            var email = $('email').value
            var reg = /^\w+@\w+(\.[a-z\d]{2,4}){1,2}$/
            console.log(reg.test(email));
        }
        
        function checkBirthday() {
            // 2000-12-05
            var reg = /^\d{4}-\d{1,2}-\d{1,2}$/

        }
        
        function checkPhone() {
            // 1******
            var reg = /^1\d{10}$/

        }

        /**
         * 表单提交时进行校验
         */
        function checkInput() {
            console.log(11111);
            return false // false表示阻止表单提交
        }
        

        function $(id){
            return document.getElementById(id)
        }


        window.onload = function(){
            $('regForm').onsubmit = function(){
               return checkUsername() && checkPassword()  && checkRepassword()
            }
        }
    </script>
</head>
<body>
    <h2>用户注册</h2>
    <!--<form action="success.html" method="get" onsubmit="return checkInput()">-->
    <form action="success.html" method="get" id="regForm">
        <label for="username">用户名：</label>
        <input type="text" id="username" placeholder="请输入用户名" required onblur="checkUsername()">
        <span id="usernameInfo"></span><br>

        <label for="password">密码：</label>
        <input type="password" id="password" placeholder="请输入密码" onblur="checkPassword()">
        <span id="passwordInfo"></span><br>

        <label for="repassword">确认密码：</label>
        <input type="password" id="repassword" placeholder="请输入确认密码" onblur="checkRepassword()">
        <span id="repasswordInfo"></span><br>

        <label for="email">邮箱：</label>
        <input type="text" id="email" placeholder="请输入邮箱" onblur="checkEmail()">
        <span id="emailInfo"></span><br>

        <label for="birthday">出生日期：</label>
        <input type="text" id="birthday" placeholder="请输入出生日期" onblur="checkBirthday()"> <br>
        <span id="birthdayInfo"></span><br>

        <label for="phone">手机号：</label>
        <input type="text" id="phone" placeholder="请输入手机号" onblur="checkPhone()">
        <span id="phoneInfo"></span><br>

        <input type="submit" value="注册">
        <input type="reset" value="重置">
    </form>
</body>
</html>